<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">table-basics</view>
			<view class="tui-page__desc">调整文字对齐方式，大小，颜色等</view>
		</view>
		<view class="tui-section__title">默认表格</view>
		<view class="tui-page__spacing">
			<tui-table>
				<tui-tr>
					<tui-td bold v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">调整宽度 span</view>
		<view class="tui-page__spacing">
			<tui-table>
				<tui-tr>
					<tui-td :span="index==2?12:6" bold v-for="(item,index) in header" :key="index">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td :span="idx==2?12:6" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">调整宽度 width</view>
		<view class="tui-page__spacing">
			<tui-table>
				<tui-tr>
					<tui-td :width="['70px','60px','auto'][index]" :flexGrow="index==2" bold v-for="(item,index) in header" :key="index">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td :width="['70px','60px','auto'][idx]" :flexGrow="idx==2" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>

		<view class="tui-section__title">居中对齐</view>
		<view class="tui-page__spacing">
			<tui-table>
				<tui-tr>
					<tui-td bold align-items="center" v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td :size="26" :color="index==0?'#5677fc':'#333'" align-items="center" :span="8" v-for="(obj, idx) in header"
					 :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">右对齐</view>
		<view class="tui-page__spacing">
			<tui-table>
				<tui-tr>
					<tui-td height="72rpx" color="#07c160" align-items="right" v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td align-items="right" text-align="right" :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">去掉纵向边框</view>
		<view class="tui-page__spacing">
			<tui-table border-right>
				<tui-tr>
					<tui-td border-width="0" height="72rpx" bold color="#07c160" v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td border-width="0" :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">去掉所有边框</view>
		<view class="tui-page__spacing">
			<tui-table border-width="0">
				<tui-tr border-width="0">
					<tui-td height="72rpx" border-width="0" align-items="center" bold color="#07c160" v-for="(item,index) in header"
					 :key="index" :span="8">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr border-width="0" v-for="(item, index) in listData" :key="index">
					<tui-td border-width="0" align-items="center" :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">文字超出隐藏</view>
		<view class="tui-page__spacing">
			<tui-table>
				<tui-tr>
					<tui-td bold v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td ellipsis :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">无背景色/设置padding</view>
		<view class="tui-page__spacing">
			<tui-table>
				<tui-tr backgroundColor="transparent">
					<tui-td padding="20rpx 16rpx"  bold v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
				</tui-tr>
				<tui-tr backgroundColor="transparent" v-for="(item, index) in listData" :key="index">
					<tui-td padding="20rpx 16rpx" height="80rpx"  ellipsis :span="8" v-for="(obj, idx) in header"
					 :key="idx">{{item[obj.key]}}</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view class="tui-section__title">border颜色/width:100%</view>
		<tui-table borderColor="#07c160">
			<tui-tr borderColor="#07c160">
				<tui-td borderColor="#07c160" padding="20rpx 16rpx"  bold v-for="(item,index) in header"
				 :key="index" :span="8">{{item.title}}</tui-td>
			</tui-tr>
			<tui-tr borderColor="#07c160" v-for="(item, index) in listData" :key="index">
				<tui-td borderColor="#07c160" padding="20rpx 16rpx" height="80rpx"  ellipsis :span="8"
				 v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
			</tui-tr>
		</tui-table>
		<view class="tui-section__title">无表头/宫格/点击事件</view>
		<tui-table>
			<tui-tr flex-wrap border-width="0">
				<tui-td borderBottom height="250rpx" align-items="center" text-align="center" backgroundColor="transparent" :span="8"
				 v-for="(obj, idx) in list" :key="idx" @click="itemClick(obj.id)">
					<view>
						<image :src="obj.src" style="width: 100rpx; height: 100rpx;"></image>
						<view>{{obj.title}}</view>
					</view>
				</tui-td>
			</tui-tr>
		</tui-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header: [{
						title: '姓名',
						key: 'name'
					},
					{
						title: '年龄',
						key: 'age'
					},
					{
						title: '地址',
						key: 'address'
					}
				],
				listData: [{
						id: 1,
						name: '张三',
						age: '18',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 2,
						name: '李四',
						age: '16',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 3,
						name: '王小虎',
						age: '38',
						address: '上海市普陀区金沙江路'
					}
				],

				list: [{
					id: 1,
					src: '/static/images/layout/1.jpg',
					title: '背包'
				}, {
					id: 2,
					src: '/static/images/layout/2.jpg',
					title: '雨伞'
				}, {
					id: 3,
					src: '/static/images/layout/1.jpg',
					title: '双肩包'
				}, {
					id: 4,
					src: '/static/images/layout/2.jpg',
					title: '太阳伞'
				}, {
					id: 5,
					src: '/static/images/layout/2.jpg',
					title: '雨伞'
				}, {
					id: 6,
					src: '/static/images/layout/1.jpg',
					title: '双肩包'
				}, {
					id: 7,
					src: '/static/images/layout/2.jpg',
					title: '太阳伞'
				}, {
					id: 8,
					src: '/static/images/layout/2.jpg',
					title: '雨伞'
				}, {
					id: 9,
					src: '/static/images/layout/1.jpg',
					title: '双肩包'
				}]
			};
		},
		methods: {
			itemClick(id) {
				this.tui.toast(`id=${id}`)
			}
		}
	};
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}

	.tui-section__title {
		padding-left: 15px;
	}
</style>
